﻿<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<meta target="_blank"/>
	<title>认识JS</title>
	<link href="skins/style.css" rel="stylesheet" />
	<script src="skins/jquery.js" type="text/javascript"></script>
	<script src="skins/lofox.js" type="text/javascript"></script>
</head>
<body>
	<div class="navbar">
		<div class="navigation">
			<a href="#">A</a>
			<a href="#">B</a>
			<a href="#">C</a>
			<a href="#">D</a>
			<a href="#">E</a>
			<a href="#">F</a>
		</div>
	</div>
	<div class="pageCnt">
		<div class="mid_txt">
			<h1>什么是JS</h1>
			<div class="links">
			
			</div>
		</div>
	</div>
	<div class="pageCnt">
		<div class="mid_txt">
			<h1>JS能做什么</h1>
			<div class="links">
				<h3>表单验证</h3>
				<a href="http://www.yiban.cn/login" target="_blank">易班登录页</a>
				<a href="http://www.yiban.cn/regNew" target="_blank">易班注册页</a>
				<h3>视觉体验</h3>
				<a href="http://www.yiban.cn/" target="_blank">轮播图</a>
				<a href="http://www.yiban.cn/bbs/list?area=43900" target="_blank">瀑布流页面</a>
				<a href="http://www.yiban.cn/photo/albumlist?id=284506&username=%BE%E7%D6%D0%C8%CB#" target="_blank">易班个人相册</a>
			</div>
		</div>
	</div>
	<div class="pageCnt">
		<div class="mid_txt">
			<h1>如何学习</h1>
			<div class="links">
				<h3>学习javascript基础</h3>
				<a href="http://www.w3school.com.cn/js/index.asp" target="_blank">w3school</a>
				<h3>了解事件驱动机制、dom</h3>
				<a href="http://www.w3school.com.cn/htmldom/index.asp" target="_blank">dom</a>
				<h3>选择一个javascript框架（jquery）</h3>
				<a href="http://jquery.com/" target="_blank">jquery</a>
				<a href="http://www.w3school.com.cn/jquery/index.asp" target="_blank">w3school</a>
			</div>
		</div>
	</div>
	<div class="pageCnt">
		<div class="mid_txt">
			<h1>尝试练习</h1>
			<div class="demo">
				<div class="demo_script">
					$('.demo_btn').mouseover(function(){<br/>
					　　$('.demo_text').show();<br/>
					});<br/>
					<br/>
					$('.demo_btn').mouseout(function(){<br/>
					　　$('.demo_text').hide();<br/>
					});<br/>
				</div>
				<span class="demo_btn">鼠标放上来</span>
				<p class="demo_text">hello word !</p>
				
				<script type="text/javascript">
					$('.demo_btn').mouseover(function(){
					    $('.demo_text').show();
					});
					
					$('.demo_btn').mouseout(function(){
					    $('.demo_text').hide();
					});
				</script>
			</div>
		</div>
	</div>
	<div class="pageCnt">
		<div class="mid_txt">
			<h1>推荐</h1>
			<div class="links">
				<h3>在线学习</h3>
				<a href="http://www.w3school.com.cn/" target="_blank">w3school</a>
				<a href="http://jquery.com/" target="_blank">jquery官网</a>
				<a href="http://jsfiddle.net/" target="_blank">代码在线调试</a>
				
				<h3>前端分享</h3>
				<a href="http://www.w3cplus.com/" target="_blank">w3cplus</a>
				<a href="http://ued.taobao.com/blog/category/bowen/frontend/" target="_blank">淘宝UED</a>
				<a href="http://udc.weibo.com/" target="_blank">微博UED</a>
			</div>
		</div>
	</div>
	<div class="pageCnt">
		<div class="mid_txt">
			<h1>Thank you ！</h1>
			<div class="links">
				<h3>在线学习</h3>
				<a href="http://www.w3school.com.cn/" target="_blank">w3school</a>
				<a href="http://jquery.com/" target="_blank">jquery官网</a>
				<a href="http://jsfiddle.net/" target="_blank">代码在线调试</a>
				
				<h3>前端分享</h3>
				<a href="http://www.w3cplus.com/" target="_blank">w3cplus</a>
				<a href="http://ued.taobao.com/blog/category/bowen/frontend/" target="_blank">淘宝UED</a>
				<a href="http://udc.weibo.com/" target="_blank">微博UED</a>
			</div>
		</div>
	</div>
</body>
</html>